<template>
    <section class="ml-game-hero ml-wrapper" :style="{margin: $route.name === 'Game' ? 0 : ''}">
        <div class="container justify-content-center">
            <div class="row justify-content-center">
                <div class="jumbotrons col-md-6"><h1>Malus回国游戏加速</h1>
                    <p>{{$t('game_hero_desc')}}</p><a href="/game" class="ml-game-btn">{{$t('game_hero_button')}}</a></div>
                <div class="img-wrapper col-md-6">
                    <div class="hero_img"><img :src="gameHeroPath" alt="tag"></div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    name: "GameHero",
    data () {
        return {
            gameHeroPath: require('@/assets/hero_right1.c869c.png')
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 768px) {
    .ml-game-hero {
        margin-top: 40px!important;
        min-height: 640px !important;
        margin-bottom: 32px!important;
        .jumbotrons {
            margin-bottom: 48px !important;

            h1 {
                width: 325px !important;
                height: 30px !important;
            }
        }
    }
}
.ml-game-hero {
    background: url(../assets/hero_bg.2c649.svg) no-repeat, #1a1a3c;
    background-size: cover;
    position: relative;
    z-index: 1;
    margin-top: 80px;
    overflow: hidden;
    margin-bottom: -70px;
    min-height: 480px;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .row {
        align-items: center;
    }

    .jumbotrons {
        margin-top: -18px;
        position: relative;
        z-index: 9999;
        background: none;

        h1 {
            text-indent: -999999px;
            display: block;
            width: 512px;
            height: 48px;
            margin: 0;
            padding: 0;
            background: url(../assets/hero_title.bebb6.svg) no-repeat;
            background-size: cover;
        }

        p {
            margin-top: 24px;
            padding-right: 32px;
            padding-left: 12px;
            font-size: 15px;
            color: rgba(255, 255, 255, .7);
        }

        a {
            margin-top: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
            width: 227px;
            height: 50px;
            background: url(../assets/hero_btn.05f25.svg) no-repeat;
            background-size: cover;
            cursor: pointer;
            transition: all .2s ease-in;
            color: #333;
        }
    }

    .img-wrapper {
        img {
            width: 100%;
            z-index: 333;
            position: relative;
        }

        .hero_img:before {
            content: "";
            display: block;
            width: 480px;
            height: 480px;
            background: url(../assets/earth.5fc7e.svg) no-repeat;
            background-size: cover;
            position: absolute;
            top: -94px;
            right: 20px;
            z-index: 2;
            animation: rotation 30s infinite linear;
        }
    }
}
</style>
